<template>
	<view class="container">
		<view class="paid-info2">
			<!-- <view class="paid_content">
				<view class="header">
					<view class="left_content">
						<text>待支付</text>
					</view>
					<view class="right_content">
						<text class="title">需支付</text><text class="amt">￥{{orderDetails.totalMoney}}</text>
					</view>
				</view>
				<view class="order_code">
					<text class="title">订单编号：</text><text class="val">{{orderDetails.chargeOrderId}}</text><uni-icons type="compose" color="#478BFF" size="20"></uni-icons>
				</view>
				<view class="order_source">
					<text class="title">订单来源：</text><text class="val">小程序</text>
				</view>
			</view> -->
			<view class="station_content">
				<view class="header">
					<text class="title">{{orderDetails.connectorName ||''}}</text><text
						class="val">{{orderDetails.stationName}}</text>
				</view>
				<view class="end_num">
					<text>终端编号：{{orderDetails.connectorId}}</text>
				</view>
				<view class="car_code">
					<text class="num_text">订单编号：</text><text class="charge_text">{{orderDetails.chargeOrderId}}</text>
				</view>
			</view>
		</view>
		<!-- <view class="plate_num">
			<view class="title">
				<text class="left">车牌号：</text><text class="right">川A8d909></text>
			</view>
			<view class="memo">
				<text>车牌号不对？</text>
			</view>
		</view> -->
		<view class="charge_info">
			<view class="info_title">
				<text>充电信息</text>
			</view>
			<view class="info_content">
				<view class="left_content">
					<view class="item">
						<text>充电开始时间</text>
					</view>
					<view class="item">
						<text>充电结束时间</text>
					</view>
					<!-- <view class="item">
						<text>充电时长</text>
					</view> -->
					<view class="item">
						<text>充电度数</text>
					</view>
				</view>
				<view class="right_content">
					<view class="item">
						<text>{{orderDetails.startTime}}</text>
					</view>
					<view class="item">
						<text>{{orderDetails.endTime}}</text>
					</view>
					<!-- <view class="item">
						<text>6小时</text>
					</view> -->
					<view class="item">
						<text v-if="orderDetails.totalPower">{{Number(orderDetails.totalPower).toFixed(2)}}度</text>
					</view>
				</view>
			</view>
		</view>
		<view class="charge_info">
			<view class="info_title">
				<text>充电费用</text>
			</view>
			<view class="info_content">
				<view class="left_content">
					<view class="item">
						<text>充电费用</text>
					</view>
					<!-- <view class="item">
						<text>电费</text>
					</view>
					<view class="item">
						<text>服务费</text>
					</view> -->
					<view class="item">
						<text>实付金额</text>
					</view>
					<view class="item">
						<text>优惠金额</text>
					</view>
				</view>
				<view class="right_content">
					<view class="item">
						<text v-if="orderDetails.totalMoney">{{Number(orderDetails.totalMoney).toFixed(2)}}元</text>
					</view>
					<!-- <view class="item">
						<text>{{Number(orderDetails.totalElecMoney).toFixed(2)}}元</text>
					</view>
					<view class="item">
						<text>{{Number(orderDetails.totalSeviceMoney).toFixed(2)}}元</text>
					</view> -->
					<view class="item">
						<text v-if="orderDetails.realAmt">{{Number(orderDetails.realAmt).toFixed(2)}}元</text>
					</view>
					<view class="item">
						<text v-if="orderDetails.discAmt">{{Number(orderDetails.discAmt).toFixed(2)}}元</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_pay_bar">
			<view class="amt_info">
				<text class="count_text">合计：</text>
				<text class="rmb">￥</text>
				<text class="amt_val" v-if="orderDetails.realAmt">{{Number(orderDetails.realAmt).toFixed(2)}}元</text>
				<text class="unit">元</text>
			</view>
			<view class="pay_btn" @click="prePay">返回首页</view>
		</view>
		<uni-popup ref="payWayPopup" background-color="#fff">
			<view class="pay_way_content">
				<view class="header">
					<text>选择支付方式</text>
				</view>
				<view class="pay_list">
					<radio-group @change="radioPayWay">
						<label class="uni-list-cell" v-for="(item, index) in memberPayInfo" :key="item.memberId">
							<view>{{item.memberName}}:{{item.accAmt}}元</view>
							<view>
								<radio :value="item.accMemberId" :checked="index === current" />
							</view>
						</label>
					</radio-group>
					<view class="confirm_pay" @click="confirmPay">
						<span>确认支付</span>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		completeChargeOrderDetails,
		createMemberInfo
	} from '@/api/index'
	export default {
		data() {
			return {
				orderDetails: {},
				timer: null,
				checkCounts: 0, // 轮询次数
				startChargeSeq: '',
				memberPayInfo: [],
				current: 0,
				chargeDetails: [] // 充电详情
			};
		},
		onLoad(option) {
			if (option.startChargeSeq) {
				this.startChargeSeq = option.startChargeSeq
				this.chargeOrderDetails(0)
			} else {
				console.log('参数异常', JSON.stringify(option))
			}
			// this.getPayInfo()
		},
		methods: {
			// 获取会员信息里面支付信息
			getPayInfo() {
				createMemberInfo({
					openId: uni.getStorageSync('userOpenId'),
				}).then(res => {
					console.log(res, 'createMemberInfo')
					if (res && res.memberAccListVos) {
						this.memberPayInfo = res.memberAccListVos
					} else {
						console.log(res, '错误信息')
					}
				}).catch(error => {
					console.log(error)
				})
			},
			// 查询订单状态
			chargeOrderDetails(time) {
				uni.showLoading({
					title: '支付中...'
				});
				const self = this
				completeChargeOrderDetails({
					openid: uni.getStorageSync('userOpenId'), // 充电接口ID
					startChargeSeq: this.startChargeSeq, // 充电请求订单号
				}).then(res => {
					console.log(res, 'orderStatus')
					uni.hideLoading()
					if (res !== 'creating' && res.paidStatus == 1) {
						self.orderDetails = res
						self.chargeDetails = JSON.parse(self.orderDetails.chargeDetails)
					} else{
						uni.showModal({
							title: '提示',
							content: '获取订单失败请联系管理员',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						})
					}
				}).catch(error => {
					console.log(error)
				})
				// self.timer = setTimeout(() => {
				// 	completeChargeOrderDetails({
				// 		openid: uni.getStorageSync('userOpenId'), // 充电接口ID
				// 		startChargeSeq: this.startChargeSeq, // 充电请求订单号
				// 	}).then(res => {
				// 		self.checkCounts += 1
				// 		console.log(res, 'orderStatus')
				// 		if (res === 'creating' || res.paidStatus == 0) {
				// 			if (self.checkCounts >= 10) {
				// 				clearTimeout(self.timer)
				// 				uni.showModal({
				// 					title: '提示',
				// 					content: '获取订单失败请联系管理员',
				// 					showCancel: false,
				// 					success: function(res) {
				// 						if (res.confirm) {
				// 							console.log('用户点击确定');
				// 						} else if (res.cancel) {
				// 							console.log('用户点击取消');
				// 						}
				// 					}
				// 				})
				// 			} else {
				// 				self.chargeOrderDetails(5000)
				// 			}
				// 		} else {
				// 			self.orderDetails = res
				// 			self.chargeDetails = JSON.parse(self.orderDetails.chargeDetails)
				// 			if (res.paidStatus == 1) {
				// 				uni.hideLoading()
				// 			}
				// 			clearTimeout(self.timer)
				// 		}
				// 	}).catch(error => {
				// 		console.log(error)
				// 	})
				// }, time)
			},
			// 准备支付拉起支付方式选择窗
			prePay() {
				// this.$refs.payWayPopup.open('bottom')
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 选择支付方式
			radioPayWay: function(evt) {
				console.log(evt, 'evtevt')
				for (let i = 0; i < this.memberPayInfo.length; i++) {
					if (this.memberPayInfo[i].memberId === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			// 确认支付
			confirmPay() {
				// todo 调用支付接口

			}
		},
		destroyed() {
			// 离开页面销毁定时器
			clearTimeout(this.timer)
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #F3F5F7;
		// padding: 24rpx 30rpx;
		padding-top: 24rpx;
		// .paid-info {
		// 	background-color: #ff5500;
		// 	padding: 30rpx 30rpx;
		// 	color: white;
		// 	padding-bottom: 100rpx;
		// 	position: relative;
		// 	margin-bottom: 140rpx;

		// 	.header {
		// 		display: flex;
		// 		align-items: center;
		// 		justify-content: space-between;

		// 		.to-paid {
		// 			font-size: 36rpx;
		// 		}

		// 		.to-price {
		// 			font-size: 28rpx;
		// 		}
		// 	}

		// 	.order-code {
		// 		margin: 30rpx 0rpx 20rpx 0rpx;
		// 		font-size: 24rpx;
		// 		color: #e3efeb;

		// 		text {
		// 			border: 1rpx solid #e7eeef;
		// 			display: inline-block;
		// 			padding: 0px 4rpx;
		// 			margin-left: 20rpx;
		// 		}
		// 	}

		// 	.oder-source {
		// 		font-size: 24rpx;
		// 		color: #e3efeb;
		// 	}

		// 	.station-info {
		// 		padding: 20rpx 20rpx;
		// 		background-color: #ffffff;
		// 		border-radius: 18rpx;
		// 		// position: absolute;
		// 		// bottom: -110rpx;
		// 		// width: 87%;

		// 		.station {
		// 			display: flex;
		// 			align-items: center;
		// 			justify-content: space-between;

		// 			.station-name {
		// 				color: black;
		// 				font-size: 26rpx;

		// 				text {
		// 					font-size: 34rpx;
		// 					font-weight: 600;
		// 				}
		// 			}

		// 			.img {
		// 				width: 50rpx;
		// 				height: 30rpx;

		// 				image {
		// 					width: 100%;
		// 					height: 100%;
		// 				}
		// 			}
		// 		}

		// 		.terminal-code {
		// 			color: #cdd6d4;
		// 			font-size: 24rpx;
		// 			margin: 20rpx 0rpx 10rpx 0rpx;
		// 		}

		// 		.other-info {
		// 			color: #cdd6d4;
		// 			font-size: 24rpx;
		// 		}
		// 	}
		// }
		.paid-info2 {
			background: linear-gradient(to bottom, #D9EDFF 10%, #ffffff);
			border-radius: 16rpx;
			margin: 0 32rpx;

			.paid_content {
				padding: 24rpx 32rpx 32rpx 32rpx;
				border-bottom: 2rpx dashed #D8D8D8;

				.header {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left_content {
						font-weight: 500;
						color: #2D2B2A;
						font-size: 34rpx;
					}

					.right_content {
						font-size: 28rpx;
						font-weight: 400;

						.title {
							color: #2D2B2A;
						}

						.amt {
							color: #E56646;
						}
					}
				}

				.order_code {
					padding-top: 16rpx;
					font-size: 28rpx;
					font-weight: 400;

					.title {
						color: #939391;
					}

					.val {
						color: #478BFF;
					}
				}

				.order_source {
					padding-top: 16rpx;
					font-size: 28rpx;
					font-weight: 400;

					.title {
						color: #939391;
					}

					.val {
						color: #666260;
					}
				}
			}

			.station_content {
				padding: 32rpx;

				.header {
					font-weight: 500;
					color: #2D2B2A;

					.title {
						font-size: 34rpx;
					}

					.val {
						font-size: 28rpx;
					}
				}

				.end_num {
					padding-top: 10rpx;

					text {
						display: inline-block;
						border-radius: 4rpx;
						padding: 2rpx 8rpx;
						background: rgba(71, 139, 255, 0.09);
						font-weight: 400;
						color: #478BFF;
						font-size: 24rpx;
					}
				}

				.car_code {
					padding-top: 20rpx;
					font-weight: 400;
					color: #666260;
					font-size: 26rpx;

					text {
						display: inline-block;
					}

					.num_text {
						padding-right: 20rpx;
						border-right: 2rpx solid #D8D8D8;
					}

					.charge_text {
						padding-left: 20rpx;
					}
				}
			}
		}

		.plate_num {
			// margin-top: 24rpx;
			margin: 24rpx 32rpx 0 32rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 28rpx 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;

			.title {
				font-weight: 500;
				color: #2D2B2A;
			}

			.memo {
				font-weight: 400;
				color: #CCCCCC;
			}
		}

		.charge_info {
			// margin-top: 24rpx;
			margin: 24rpx 32rpx 0 32rpx;
			padding: 32rpx 0;
			background: #FFFFFF;
			border-radius: 16rpx;

			.info_title {
				padding: 0 32rpx 24rpx 0rpx;
				font-weight: 500;
				color: #2D2B2A;
				font-size: 28rpx;

				text {
					display: inline-block;
					padding-left: 32rpx;
					border-left: 6rpx solid #E56646;
				}
			}

			.info_content {
				padding: 8rpx 32rpx 32rpx 32rpx;
				border-top: 2rpx solid #D8D8D8;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left_content {
					.item {
						padding-top: 24rpx;
						font-weight: 400;
						color: #939391;
						font-size: 28rpx;
					}
				}

				.right_content {
					.item {
						padding-top: 24rpx;
						font-weight: 400;
						color: #2D2B2A;
						font-size: 28rpx;
						text-align: right;
					}
				}
			}
		}



		.charge-info-title {
			background-color: #c9d1cf;
			border-top-right-radius: 28rpx;
			border-bottom-right-radius: 28rpx;
			padding: 10rpx 20rpx;
			display: inline-block;
		}

		.charge-info {
			padding: 0px 30rpx;

			.license-plate {
				background-color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border: 1rpx solid #e7efed;
				padding: 20rpx 25rpx;
				border-radius: 16rpx;
				margin: 20rpx 0px;

				.card {}

				.wrong {
					color: cornflowerblue;
					text-decoration: cornflowerblue;
				}
			}

			.battery-info {
				background-color: #ffffff;
				border: 1rpx solid #e7efed;
				padding: 20rpx 25rpx;
				border-radius: 16rpx;

				.date {
					display: flex;
					justify-content: space-between;

					.left {
						view:nth-child(1) {
							font-size: 28rpx;
						}
					}

					.middle {
						display: flex;
						align-items: center;

						.rise {
							border: 1rpx #cdd6d4 solid;
							border-radius: 50%;
							font-size: 24rpx;
							width: 20px;
							text-align: center;
							line-height: 20px;
						}

						.br {
							width: 250rpx;
							height: 1rpx;
							background-color: #cdd6d4;
							margin: 0px 10rpx;
						}

						.stop {
							border: 1rpx #cdd6d4 solid;
							border-radius: 50%;
							font-size: 24rpx;
							width: 20px;
							text-align: center;
							line-height: 20px;
						}
					}

					.right {
						view:nth-child(1) {
							font-size: 28rpx;
						}
					}
				}

				.charge-duration {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					margin: 40rpx 0rpx 10rpx 0rpx;

					.number {
						font-weight: 600;
					}
				}

				.charge-degree {
					font-size: 28rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.number {
						font-weight: 600;
					}
				}
			}
		}

		.br-as {
			height: 10rpx;
			width: 100%;
			background-color: #e3eae8;
		}

		.charge-fees {
			padding: 0px 30rpx;

			.electric-charge {
				margin: 20rpx 0rpx;
				font-size: 30rpx;

				text {
					font-weight: 600;
				}
			}

			.comprehensive-expenses {
				font-size: 28rpx;
				margin-bottom: 30rpx;

				text {
					color: blueviolet;
				}
			}
		}

		.bottom_pay_bar {
			margin-top: 32rpx;
			height: auto;
			padding: 34rpx 30rpx;
			display: flex;
			justify-content: flex-end;
			align-content: center;
			box-sizing: border-box;
			background-color: #ffffff;

			.amt_info {
				padding: 20rpx 0rpx;

				.count_text {
					font-weight: 400;
					color: #2D2B2A;
					font-size: 26rpx;
				}

				.rmb {
					color: #E56646;
					font-weight: 400;
					font-size: 26rpx;
				}

				.amt_val {
					font-weight: 500;
					color: #E56646;
					font-size: 38rpx;
				}

				.unit {
					font-weight: 400;
					color: #2D2B2A;
					font-size: 26rpx;
				}
			}

			.pay_btn {
				padding: 20rpx 40rpx;
				margin-left: 24rpx;
				background: linear-gradient(180deg, #47C2FF 0%, #478BFF 100%);
				border-radius: 180rpx;
				font-size: 30rpx;
				color: white;
				text-align: center;
			}
		}
	}

	.pay_way_content {
		padding: 30rpx;

		.header {
			color: #333333;
			font-size: 32rpx;
			font-weight: bolder;
			text-align: center;
		}

		.pay_list {
			.uni-list-cell {
				padding-top: 30rpx;
				display: flex;
				justify-content: space-between;
				align-content: center;
			}

			.confirm_pay {
				width: 80%;
				margin: auto;
				background-color: #ffaa00;
				padding: 15rpx 40rpx;
				border-radius: 36rpx;
				font-size: 36rpx;
				color: white;
				text-align: center;
			}
		}
	}
</style>